<markdown>
## MARKDOWN

![](http://markdown.tw/images/208x128.png)

> 什么是Markdown？Markdown是一种轻量级的「标记语言」，通常为程序员群体所用，目前它已是全球最大的技术分享网站 GitHub 和技术问答网站 StackOverFlow 的御用书写格式。

类型 | 值 | 说明
-----|----| ----
tag | `markdown` | 自定义标签
value | markdown | 内部是markdown写法。内部支持自定组件，但并不是所有组件都能被正确解析。




### 接下来是markdown的一些代码示范

#### 1.代码高亮

```0.4
^^^
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
^^^
```

```width0.1
```

<v-code :templateid="'code1'" :css="{width:'50%'}"></v-code>


#### 2.文本突出显示

```width0.5
类型 `string`
```

```width0.5
^^^
类型 `string`
^^^
```




#### 3.粗体，斜体,删除线

```width0.5
**粗体**
__粗体__
*斜体*
_斜体_
~~删除线~~ 
```

```width0.5
^^^
**粗体**
__粗体__
*斜体*
_斜体_
~~删除线~~
^^^
```




#### 4.制作待办事项To-do List

```width0.5
- [x] 已完成项目1
    - [x] 已完成事项1
    - [x] 已完成事项2
- [ ] 待办事项1
- [ ] 待办事项2
```

```width0.5
^^^
- [x] 已完成项目1
    - [x] 已完成事项1
    - [x] 已完成事项2
- [ ] 待办事项1
- [ ] 待办事项2
^^^
```




#### 5.表格


```width0.5
First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
```


```width0.5
^^^
First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
^^^
```





#### 6.标题


```width0.4
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```

```width0.1
```

```width0.5
^^^
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
^^^
```




#### 7.链接，图片

```width0.5
[https://github.com/](https://github.com/)

![](http://pixiv-zingaro.jp/wp-content/uploads/banner/160/naniwa_small.jpg)

```
```width0.5
^^^
[https://github.com/](https://github.com/)

![](http://pixiv-zingaro.jp/wp-content/uploads/banner/160/naniwa_small.jpg)
^^^
```



#### 8.引用

```width0.5
> 引用  

```

```width0.5
^^^
> 引用
^^^ 
```

只需要在文本前加入 > 这种尖括号（大于号）即可


#### 9.下划线

```width0.4
------
******  
```

```width0.1
```

```width0.5
^^^
------
******
^^^
``` 



#### 10.html(写在markdown中的html代码原样输出)

```width0.5
<img src="http://pixiv-zingaro.jp/wp-content/uploads/banner/168/littlewitchacademia_small.jpg" alt="">
```

```width0.5
^^^
<img src="http://pixiv-zingaro.jp/wp-content/uploads/banner/168/littlewitchacademia_small.jpg" alt="">
^^^
```





#### 11.graphviz 示例图
```0.3
^^^graph
digraph G{
    
    fontname = "Courier New"
    fontsize = 10
    
    node [ fontname = "Courier New", fontsize = 10, shape = "record" ];
    edge [ fontname = "Courier New", fontsize = 10 ];
    
    Animal [ label = "{Animal |+ name : String\l+ age : int\l|+ die() : void\l}" ];
    
    subgraph clusterAnimalImpl{
        bgcolor="yellow"
        Dog [ label = "{Dog||+ bark() : void\l}" ];
        Cat [ label = "{Cat||+ meow() : void\l}" ];
    };
    
    edge [ arrowhead = "empty" ];
    
    Dog->Animal;
    Cat->Animal;
    Dog->Cat [arrowhead="none", label="0..*"];
}
^^^
```
<v-code :templateid="'code2'" :css="{width:'70%'}"></v-code>

</markdown>





<script type="x-template" id="code1">
```
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
```
</script>

<script type="x-template" id="code2">
```graph
digraph G{

    fontname = "Courier New"
    fontsize = 10

    node [ fontname = "Courier New", fontsize = 10, shape = "record" ];
    edge [ fontname = "Courier New", fontsize = 10 ];

    Animal [ label = "{Animal |+ name : String\l+ age : int\l|+ die() : void\l}" ];

    subgraph clusterAnimalImpl{
        bgcolor="yellow"
        Dog [ label = "{Dog||+ bark() : void\l}" ];
        Cat [ label = "{Cat||+ meow() : void\l}" ];
    };

    edge [ arrowhead = "empty" ];

    Dog->Animal;
    Cat->Animal;
    Dog->Cat [arrowhead="none", label="0..*"];
}
```
</script>
